<template>
    <div>
        <web-header show="liner" />
        <div class="breadcrumb"> 您当前的位置：
            <router-link to="/" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`">首页</router-link> &gt;
            <router-link to="/area" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`">目的地</router-link>
            &gt;
            <span >邮轮</span>
            <!-- &gt; <span>{{ destination.city }}</span> &gt; -->
        </div>
        <div class="big_box">
            <aside>
                <div class="box_a">
                    <div class="top">海轮航线</div>
                    <div class="bottom">
                        <ul>
                            <li>
                                <router-link title="旅游" alt="旅游" to="/liner/12">东欧</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/14">南欧</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/15">北欧</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/9">北美</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/46">美国</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/58">亚洲海岛</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/60">东南亚</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/86">泰国</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/102">日本</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/103">韩国</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/61">澳大利亚</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/62">新西兰</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/70">中东</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/71">非洲</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/74">台湾</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/188">港澳</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/82">邮轮公司</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/83">邮轮航线</router-link>
                            </li>
                        </ul>

                    </div>
                </div>

                <div class="box_a">
                    <div class="top">河轮航线</div>
                    <div class="bottom">
                        <ul>
                            <li>
                                <router-link title="旅游" alt="旅游" to="/liner/75">华东</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/76">海南</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/79">云南</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/112">福建</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/166">重庆</router-link>
                                <router-link title="旅游" alt="旅游" to="/liner/356">湖北</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box_c"  @click="selectOpen()">
                    <ul>
                        <li><img :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`" id="btn-custom-size"
                                height="50" src="https://admin.hqx.com.cn/Public/Travel/images/linelist/dz_01.jpg" />
                        </li>
                        <div id="custom-size-dialogBox"></div>
                        <li><img :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`" id="btn-custom-size2"
                                height="50" src="https://admin.hqx.com.cn/Public/Travel/images/linelist/dz_03.jpg" />
                        </li>
                        <li><img :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`" id="btn-custom-size3"
                                height="50" src="https://admin.hqx.com.cn/Public/Travel/images/linelist/dz_05.jpg" />
                        </li>
                    </ul>
                </div>
                <div id="left3"></div>
                <!-- <el-affix :offset="0">
                    <div class="box_b left3">
                        <div class="top">热门推荐</div>
                        <div class="bottom">
                            <div v-for="item in recommendList" :key="item.id">
                                <dl>
                                    <dt>
                                        <RouterLink :to="`/details/${item.id}`" :title="`${destination.area}旅游`"
                                            :alt="`${destination.area}旅游`">
                                            <img :src="`${item.pic}`" class="img" />
                                        </RouterLink>
                                    </dt>
                                    <dd>
                                        <RouterLink :to="`/details/${item.id}`" :title="`${destination.area}旅游`"
                                            :alt="`${destination.area}旅游`" class="clamp-line-1 ">{{ item.title }}
                                        </RouterLink>
                                        <span color="#FF0000" style="font-weight:bold; color: red;">{{ item.price
                                            }}/人</span>起
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </el-affix> -->
                <div class="box_d" style="display:none">
                    <div class="top">旅游攻略指南</div>
                    <div class="bottom">
                        <ul>
                            <!-- <volist name="tjlist" id="rs">
                                <li class="t{$key+1}"><a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                        href="/guide/{$rs.id}.html">{$rs.title}</a></li>
                            </volist> -->
                        </ul>
                    </div>
                </div>
            </aside>
            <div class="right_box">
                <!-- <a class="banner" target="_blank"> 
                    <img src="https://admin.hqx.com.cn/Public/Uploads/{$row.banner}" width="940px;" />
                </a> -->
                <div class="screen">
                    <div class="top">
                        <ul id="line_typeArr">
                            <li><a @click="changeList('line_type', '')" :class="data.line_type == '' ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">所有线路</a></li>
                            <li><a @click="changeList('line_type', 1)" :class="data.line_type == 1 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">跟团旅游</a></li>
                            <li><a @click="changeList('line_type', 2)" :class="data.line_type == 2 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">定制旅行</a></li>
                            <li><a @click="changeList('line_type', 5)" :class="data.line_type == 5 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">包团旅游</a></li>
                            <li><a @click="changeList('line_type', 3)" :class="data.line_type == 3 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">当地玩乐</a></li>
                        </ul>
                    </div>
                    <div class="bottom">
                        <dl>
                            <dt>游玩天数：</dt>
                            <dd id="line_daysArr">
                                <a @click="changeList('days', '')" :title="`${destination.area}旅游`"
                                    :alt="`${destination.area}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('days', 1)" :style="{ 'color': 1 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1日游</a>
                                <a @click="changeList('days', 2)" :style="{ 'color': 2 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">2-4天</a>
                                <a @click="changeList('days', 3)" :style="{ 'color': 3 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">5-7天</a>
                                <a @click="changeList('days', 4)" :style="{ 'color': 4 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">8-11天</a>
                                <a @click="changeList('days', 5)" :style="{ 'color': 5 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">11天以上</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>价格范围：</dt>
                            <dd id="priceArr">
                                <a @click="changeList('prices', '')" :title="`${destination.area}旅游`"
                                    :alt="`${destination.area}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('prices', 1)"
                                    :style="{ 'color': 1 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1000元以下</a>
                                <a @click="changeList('prices', 2)"
                                    :style="{ 'color': 2 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1000-3000元</a>
                                <a @click="changeList('prices', 3)"
                                    :style="{ 'color': 3 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">3000-5000元</a>
                                <a @click="changeList('prices', 4)"
                                    :style="{ 'color': 4 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">5000-1万元</a>
                                <a @click="changeList('prices', 5)"
                                    :style="{ 'color': 5 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1万元以上</a>
                                <!-- <a @click="changeList('prices', 5)" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">7000-1万元</a> -->
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="orders">
                    <div class="title">综合排序：</div>
                    <ul id="orderArr">
                        <li class="t1">

                            <a v-if="data.order != 1 && data.order != 2" @click="changeList('order', 2)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 2" @click="changeList('order', 1)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 1" @click="changeList('order', 2)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                        </li>
                        <li class="t2">
                            <!-- <a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a> -->
                            <a v-if="data.order != 3 && data.order != 4" @click="changeList('order', 4)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 4" @click="changeList('order', 3)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 3" @click="changeList('order', 4)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                        </li>
                        <li class="t3">
                            <!-- <a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a> -->
                            <a v-if="data.order != 5 && data.order != 6" @click="changeList('order', 6)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 6" @click="changeList('order', 5)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 5" @click="changeList('order', 6)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                        </li>
                        <li class="t4">
                            <!-- <a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a> -->
                            <a v-if="data.order != 7 && data.order != 8" @click="changeList('order', 8)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 8" @click="changeList('order', 7)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 7" @click="changeList('order', 8)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                        </li>
                    </ul>
                    <!-- <div class="nums">共发现 <strong>{$rows}</strong> 个宝贝！</div> -->
                </div>
                <div class="line_box" id="bigbox">
                    <div v-for="item in list" :key="item.id">
                        <lineItem :item='item'></lineItem>
                    </div>


                </div>
                <div class="page_a" @click="getList"> <a :title="destination.city + '旅游'" :alt="destination.city + '旅游'"
                        href="javascript:void(0)">
                        <div></div> {{ moreText }}
                    </a> </div>
            </div>
            <div class="clear"></div>
        </div>
        <web-footer />
    <back-top />
        <popup-consult ref="RefChild"></popup-consult>

        <!-- 弹窗 -->
        <!-- 私人定制 -->
        <!-- 团队定制 -->
    </div>
</template>

<script setup>


import { area_details, line_items, area_Destination, theme_itemsByArea, connect_items } from "@/api/travel";
import { ref, reactive, onBeforeMount, onMounted, computed, onUpdated, watch } from "vue";
import { useRoute, RouterLink } from 'vue-router';
import lineItem from '@/components/list-item/lineItem.vue'

const route = useRoute()
let fullPath = route.fullPath; // 保存当前路径
let data = ref({
    area: Number(route.params.area),//目的地
    theme: 6, // 主题 默认邮轮
    line_type: '', //出游方式
    plays: '', //玩法
    prices: '', //价格范围
    days: '',
    order: '', // 排序
    page: 1,
    limit: 5,
});
let list = ref([]);


let destination = ref({}); // 所有信息 
let moreText = ref('展开更多精彩体验') // 展开更多
let recommendList = ref([]); // 推荐

// 获取子组件的引用
const RefChild = ref();
 
const selectOpen = () => {
   if (RefChild.value) {
     RefChild.value.open();
   }
}

// 初始化 
const initialize = async () => {
    fullPath = route.fullPath; // 保存当前路径
    // 初始化数据
    data.value = {
        area: route.params.area || '',//目的地
        theme: 6, // 主题 默认邮轮
        line_type: '', //出游方式
        plays: '', //玩法
        prices: '', //价格范围
        days: '',
        order: '', // 排序
        page: 1,
        limit: 5,
    };
    list.value = [];
    moreText.value = '展开更多精彩体验';

    // 初始化列表
    await getList();

    // 获取推荐列表
    // let res2 = await line_items({ des: destination.value.id, limit: 5 });
    // recommendList.value = res2.data;

}



// 翻页 持续获取list数据
const getList = async () => {
    if (moreText.value == '没有更多了') {
        return;
    }
    let res = await line_items(data.value);
    list.value = [...list.value, ...res.data];
    data.value.page++;
    if (res.data.length == 0) {
        moreText.value = '没有更多了';
    }

}

// 改变data.value时切换列表
const anewList = async () => {
    let res = await line_items(data.value);
    list.value = [...res.data];
    data.value.page = 2;
    moreText.value = res.data.length == 0 ? '没有更多了' : '展开更多精彩体验';
}


// data值改变
const changeList = (key, value) => {
    switch (key) {
        case 'line_type':
            data.value.line_type = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'theme':
            data.value.theme = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'prices':
            data.value.prices = value;
            break;
        case 'days':
            data.value.days = value;
            break;
        case 'order':
            data.value.order = value;
            break;
        default:
            break;
    }
    data.value.page = 1;
    anewList();
}


onMounted(async () => {
    initialize();


});

// 页面更新 对比routePath 重新请求
// onUpdated(() => {
//     // console.log('更新', route.fullPath === fullPath)
//     if (route.fullPath !== fullPath) { // 判断路径是否改变
//         window.scrollTo(0, 0); // 页面回到顶部
//         // 重新获取数据
//         initialize()
//     }
// })




</script>

<style lang="scss" scoped>
@import "../../css/main_line_list.css";
</style>
